<template>
  <div class="eschool-operation-panel-wrapper" ref="eschoolOperationPanel" :style="panelStyle" @click="fn">
        <div class="eschool-operation-right-panel">
            <div class="up-arrow" :class="{'up-arrow-first': upFirst}" title="向上" @click.stop="moveUpwards"></div>
            <div class="down-arrow" :class="{'down-arrow-last': downLast}" title="向下" @click.stop="moveDown"></div>
            <div class="delete-comp-btn" title="删除" @click="removeComponent(selectIndex)">
                <!-- <i class="el-icon-delete"></i> -->
            </div>
        </div>
        <!-- FIXME:轮播图设置最多9张 -->
        <div class="panel-setting">
            <div class="panel-set-title">
                <span class="" v-text="panelName"></span>
                <div class="delete-panel" title="删除" @click="operationClose"><i class="el-icon-close delete-panel"></i></div>
            </div>
            <template v-if="panelType=='carousel'">
                <carouselPanel @showPanel="setShowPanelStatus"></carouselPanel>
            </template>
            <template v-if="panelType=='menus'">
                <menusPanel></menusPanel>
            </template>
            <template v-if="panelType=='pic'">
                <picPanel></picPanel>
            </template>
            <template v-if="panelType=='text'">
                <textPanel></textPanel>
            </template>
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper';
import carouselPanel from './carouselPanel';
import menusPanel from './menusPanel';
import picPanel from './picPanel';
import textPanel from './textPanel';
import { mapGetters, mapMutations, mapActions } from 'vuex';
export default {
    name: 'panelSetting',
    components: {
        carouselPanel,
        menusPanel,
        picPanel,
        textPanel
    },
    props: {
        panelType: {
            type: String,
            default: ''
        },
        styleObj: {
            type: Object,
            default() {
                return {};
            }
        },
        showPanel: {
            type: Boolean,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            operationStatus: false,
            panelStyle: {}
        }
    },
    computed: {
        ...mapGetters([
            'selectIndex',
            'phoneData'
        ]),
        panelName() {
            if (this.panelType == 'carousel') {
                return '轮播图设置';
            }
            if (this.panelType == 'pic') {
                return '图片设置';
            }
            if (this.panelType == 'menus') {
                return '菜单栏设置';
            }
            if (this.panelType == 'text') {
                return '文本设置';
            }
        },
        upFirst() {
            if (this.selectIndex == 0) {
                return true;
            }
            return false;
        },
        downLast() {
            if (this.selectIndex == this.phoneData.length - 1) {
                return true;
            }
            return false;
        }
    },
    mounted() {
        // 
    },
    methods: {
        ...mapMutations([
            'REMOVE_COMPONENT',
            'RESET_SELECT_INDEX',
            'SELECT_ITEM'
        ]),
        ...mapActions([
            'SWAP_ITEMS'
        ]),
        setShowPanelStatus(flag) {
            this.$emit('update:showPanel', flag);
        },
        // 删除组件
        removeComponent(index) {
            this.$confirm('确定要删除该模块吗？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
            .then(() => {
                this.REMOVE_COMPONENT(this.selectIndex);
                // this.operationStatus = false
                this.$emit('update:showPanel', false);
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                setTimeout(() => {
                    this.$emit('update:showPanel', true);
                    this.SELECT_ITEM(index)
                }, 10)
            });
            
        },
        // 面板隐藏
        operationClose() {
            // 
            this.RESET_SELECT_INDEX();
            this.$emit('update:showPanel', false);
        },
        // 设置面板top值
        setTop(phoneComp) {
            this.operationStatus = true;
            this.$nextTick(() => {
                // let viewHeight = window.innerHeight;
                // let esPanelWrapper = document.querySelector('.eschool-operation-panel-wrapper');
                // let panelSetting = esPanelWrapper.querySelector('.panel-setting');
                // let iH = panelSetting.offsetHeight;
                let itemSelectEleTop = phoneComp.position().top; // 
                //console.log(phoneComp, itemSelectEleTop)
                this.panelStyle = Object.assign({}, {
                    top: itemSelectEleTop + 'px'
                });
                this.$refs.eschoolOperationPanel.style.top = itemSelectEleTop + 'px';
                // //console.log(this.panelStyle, 'itemSelectEleTop', itemSelectEleTop)
            });
        },
        // 向上移动
        moveUpwards() {
            let index = this.selectIndex;
            if (index == 0) {
                this.$message({
                    message: '已经在最上面了',
                    type: 'info'
                })
                return;
            }
            this.SWAP_ITEMS({'phoneData': this.phoneData, 'curIndex': index, 'nextIndex': index - 1});
            this.updatePanelTop();
            this.updateSwiper();
        },
        // 向下移动
        moveDown() {
            let index = this.selectIndex;
            let next = this.phoneData.length -1;
            if (index == next) {
                this.$message({
                    message: '已经在最下面了',
                    type: 'info'
                })
                return;
            }
            this.SWAP_ITEMS({'phoneData': this.phoneData, 'curIndex': index, 'nextIndex': index + 1});
            this.updatePanelTop();
            this.updateSwiper();
        },
        updatePanelTop() {
            //console.log(this.selectIndex, 'this.selectIndex updatePanelTop')
            let compListComponent = $('.comp-list-component').eq(this.selectIndex);
            // //console.log(compListComponent)
            this.setTop(compListComponent);
        },
        // 空函数阻止事件传递
        fn(ev) {
            //
            ev.stopPropagation(); 
        },
        updateSwiper() {
            this.$nextTick(() => {
                let carouselContainer = document.querySelectorAll('.carousel-container');
                carouselContainer.length && [].slice.call(carouselContainer).forEach((item) => {
                    item.swiper&&item.swiper.destroy();
                    item.swiper = new Swiper(item, {
                        pagination: '.swiper-pagination',
                        paginationClickable: true,
                        loop: true,
                        autoplay: 6000,
                        autoplayDisableOnInteraction: false,
                        observer: true
                    });
                })
            });
        }
    }
}
</script>

<style lang="scss">
    .eschool-operation-panel-wrapper {
        position: absolute;
        top: 0px;
        right: -380px;
        width: 369px;
        .el-input__inner {
            box-shadow: none;
            border: 1px solid #ddd;
        }
        .el-select-dropdown {
            box-shadow: none;
            border: 1px solid #ddd;
        }
        .eschool-operation-right-panel {
            width: 36px;
            position: absolute;
            top: 0;
            left: 0;
            height: 148px;
            padding: 14px 4px 0;
            background: #fff;
            .btn-arrow {
                margin: 0 auto;
                width: 28px;
                height: 26px;
                background-position: center center;
                background-repeat: no-repeat;
                cursor: pointer;
            }
            .up-arrow {
                @extend .btn-arrow;
                margin-bottom: 10px;
                background-image: url(../../../assets/eschool/up-arrow.png);
            }
            .up-arrow.up-arrow-first{
                background-image: url(../../../assets/eschool/up-arrow-on.png);
            }
            .down-arrow {
                @extend .btn-arrow;
                background-image: url(../../../assets/eschool/down-arrow.png);
            }
            .down-arrow.down-arrow-last {
                background-image: url(../../../assets/eschool/down-arrow-on.png);
            }
            .delete-comp-btn {
                width: 20px;
                height: 20px;
                background: url(../../../assets/eschool/del-comp.png) center center;
                background-repeat: no-repeat;
                margin-top: 20px;
                text-align: center;
                .el-icon-delete {
                    color: #989999;
                    font-size: 18px;
                }
                 @extend .btn-arrow;
                 .el-delete-panel {
                     font-size: 18px;
                     color: #989999;
                 }
            }
        }
        .panel-setting {
            margin-left: 12px;
            width: 320px;
            position: absolute;
            left: 38px;
            top: 0;
            padding: 10px 20px;
            background: #fff;
        }
        .panel-set-title {
            font-size: 15px;
            position: relative;
            color: #ccc;
            font-family: MicrosoftYaHei;
            margin-bottom: 12px;
            .delete-panel {
                width: 16px;
                height: 16px;
                text-align: center;
                line-height: 16px;
                position: absolute;
                top: 0;
                right: 0;
                font-size: 12px;
                color: #ccc;
                cursor: pointer;
            }
        }
        .add-item {
            color: #757575;
            font-family: MicrosoftYaHeiLight;
            cursor: pointer;
            margin-bottom: 24px;
            font-size: 14px;
            .addpic-icon {
                display: inline-block;
                width: 16px;
                height: 16px;
                background: url(../../../assets/eschool/add-plus.png);
                vertical-align: middle;
            }
        }
        .panel-body {
            // 轮播图
            .panel-item{
                width: 280px;
                height: 60px;
                background: #f6f7f8;
                padding: 6px;
                margin-bottom: 10px;
                position: relative;
                .img{
                    float: left;
                    width: 99px;
                    height: 48px;
                    overflow: hidden;
                    background: #ddd;
                    margin-right: 10px;
                    background-size: cover;
                    cursor: pointer;
                    position: relative;
                }
                .delete-btn {
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top: 50%;
                    right: 4px;
                    text-align: center;
                    -webkit-transform: translate(0, -50%);
                    transform: translate(0, -50%);
                    cursor: pointer;
                    .item-delete {
                        font-size: 14px;
                        color: #989999;
                    }
                }
                .article-cate {
                    margin-bottom: 5px;
                }
                .com-select {
                    float: left;
                    display: block;
                    width: 140px;
                }
                .article-select {
                    margin-bottom: 5px;
                }
                .text-select {
                    width: 140px;
                    float: left;
                }
            }
            // menus
            .panel-select {
                font-size: 12px;
                color: #7a7a7a;
                font-family: MicrosoftYaHeiLight, '黑体';
                margin-bottom: 18px;
                margin-top: 15px;
                .arrangement-select {
                    display: inline-block;
                    width: 226px;
                }
            }
            &.panel-menus {
                .panel-item {
                    .img {
                        width: 48px;
                        height: 48px;
                       
                    }
                    .com-select {
                        width: 178px;
                    }
                } 
            }
        }
    }
</style>
